
<style type="text/css">
	h2{margin-left:20px}
</style>

<h2>表格示例</h2><hr class="layui-bg-orange">
<div id="demo1">
</div>

<h2>表单示例</h2><hr class="layui-bg-orange">
<div id="demo2">
	
</div>



<script type="text/html" id="switch">
	<input type="checkbox"  name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript">
	layui.config({base: '/static/layui_extends/'})
	layui.use(['laydate', 'form','element', 'layer', 'jquery','table','enianTable'], function() {
		var $ = layui.jquery,table=layui.table,form=layui.form,enianTable=layui.enianTable;
		var fieldData = [
			{
				//title:"status"
				tableHead:{
					type:'checkbox'
					,fixed:'left'
					}
				,type:false
				
			}
			,{
				tableHead:{
					field:'status'
					,title:'状态'
					,width:80
					,sort:true
					//,fixed:'left'
					}
				,type:"switch"
				,typeData:{
					"on":{
						"data":1
						,"name":"开"
						}
					,"off":{
						"data":0
						,"name":"关"
						}
					}
			}
			,{
				tableHead:{
					field:'aid'
					,title:'AID'
					//,width:80
					,sort:true
					//,fixed:'left'
					}
				,type:"checkbox"
				,typeData:{
					"on":{
						"data":2
						,"name":"复选"
						}
					,"off":{
						"data":0
						//,"name":"关"
						}
					}
			}
			,{
				tableHead:{
					field:'name'
					,title:'昵称'
					//,width:80
					,sort:true
					//,fixed:'left'
					}
				,type:"select"
				,typeData:[
					{'key':'city','value':'小猎人','title':'上海'}
					,{'key':'city','value':'红烧猎人','title':'上海'}
				]
			}
			,{
				tableHead:{
					field:'note'
					,title:'备注'
					//,width:80
					,sort:true
					//,fixed:'left'
					}
				,type:"input"
				,typeData:{
					"msg":"请输入5个字以上"
				}
			}
			,{
				tableHead:{
					field:'username'
					,title:'账号'
					//,width:80
					,sort:true
					//,fixed:'left'
					}
				,type:"button"
				,typeData:[
					 {"title":"小角色",value:"95302870","url":"##","event":"sign1","skin":""}
					,{"title":"主人",value:"Administrator","url":"##","event":"sign","skin":"layui-btn-normal"}
				]
			}
			,{
				tableHead:{
					field:'password'
					,title:'密码'
					//,width:80
					//,sort:true
					//,fixed:'left'
					}
				,type:"bigInput"
				,typeData:{
					"msg":"请输入5个字以上"
				}
			}
			,{
				tableHead:{
					field:'auth'
					,title:'权限'
					//,width:80
					//,sort:true
					//,fixed:'left'
					}
				,type:"noInput"
				,typeData:{
					"msg":"请输入5个字以上"
				}
			}
			,{
				tableHead:{
					field:'last_ip'
					,title:'ip'
					//,width:80
					//,sort:true
					//,fixed:'left'
					}
				,type:"hide"
				
			}
			,{
				//title:"status"
				tableHead:{
					toolbar:'#barDemo'
					,fixed:'right'
					}
				
			}
		]
		
		enianTable.table({
			elem:"#demo1"
			,url:"{:url('',['t'=>1])}"
			,data:fieldData
			,config:{
				page:true
				//详见layui文档 数据表格 - 基本参数
			}
			,before:function(datas){
				datas.push({field:'last_time', width:80, title: 'ggg', sort: true})
				console.log(datas)
				return datas;
			}
			,checkbox:function(field,obj){
				layer.tips(field.value + ' ' + field.name + '：'+ obj.elem.checked, obj.othis);
				console.log(field,obj)
			}
			,toolEvent:function(obj){
				console.log(obj)
			}
		})
		
		enianTable.form({
			elem:"#demo2"
			,submitBtn:'保存'
			,data:fieldData
//			,layer:"我是标题"
//			,layer:{
//				type: 1,
//				//skin: 'layui-layer-rim', //加上边框
//				area: ['600px', '400px'], //宽高
//			}
			,val:{
				password:'966223'
			}
			,submit:function(data){
			    layer.alert(JSON.stringify(data.field), {
			      title: '最终的提交信息'
			    })
			}
		})
		
		console.log(fieldData)

		
		//搜索表单模板
//		//$(elem).append('<script type="text/html" id="update-data"><\/script>');
//		$(elem).append('<div id="search-data" class="layui-form layui-form-pane"><\/div>');
//		var searchElem = "#search-data";
//		var html =" ";
//		$.each(fieldData, function(i,k) {
//			
//			switch (k.type){
//				case "switch":
//					//开关格式
//					html += '<script type="text/html" id="search_switch_'+ k.title +'"><div class="layui-form-item" pane=""><label class="layui-form-label">'+k.tableHead.title+'</label><div class="layui-input-block"><input name="'+ k.title +'" type="checkbox" lay-skin="switch" lay-text="'+k.typeData.on.name +'|'+k.typeData.off.name +'"></div></div><\/script>';
//					
//					console.log(html)
//					break;
//					
//				case "checkbox":
//					//复选框样式
//				
//					html += '<script type="text/html" id="search_checkbox_'+ k.title +'"><div class="layui-form-item" pane=""><label class="layui-form-label">'+k.tableHead.title+'</label><div class="layui-input-block"><input name="'+ k.title +'" type="checkbox" title="'+k.typeData.on.name +'"></div></div><\/script>';
//					
//					//$(updateElem).append(html);
//					break;
//					
//				case "select":
//					var listHtml='';
//					$.each(k.typeData, function(i_select,k_select) {
//						console.log(i_select,k_select)
//						listHtml += '<option value="'+ k_select.value + '"> '+ k_select.title + '</option>';
//					})
//					html +=  '<script type="text/html" id="search_select_'+ k.title +'"><div class="layui-form-item"><label class="layui-form-label">'+k.tableHead.title+'</label><div class="layui-input-block"><select name="'+ k.title +'" lay-filter="aihao">'+listHtml+'</select></div></div><\/script>';
//					//$(updateElem).append(html);
//					break;
//					
//				case "button":
//					//按钮类型
//					var listHtml='';
//					$.each(k.typeData, function(i_select,k_select) {
//						//console.log(i_select,k_select)
//						listHtml += '<option value="'+ k_select.value + '"> '+ k_select.title + '</option>';
//					})
//					var html =  '<script type="text/html" id="search_button_'+ k.title +'"><div class="layui-form-item"><label class="layui-form-label">'+k.tableHead.title+'</label><div class="layui-input-block"><select name="'+ k.title +'" lay-filter="aihao">'+listHtml+'</select></div></div><\/script>';
//					//$(updateElem).append(html);
//					break;
//				
//				case "input":
//					//普通编辑框
//					html += '<script type="text/html" id="search_input_'+ k.title +'"><div class="layui-form-item"><label class="layui-form-label">'+k.tableHead.title+'</label><div class="layui-input-block"><input type="text" name="'+ k.title +'" autocomplete="off" placeholder="'+k.typeData.msg +'" class="layui-input"></div></div><\/script>';
//					//$(updateElem).append(html);
//					break;
//					
////				case "noInput":
////					//禁止编辑框
////					html += '<div class="layui-form-item"><label class="layui-form-label">'+k.tableHead.title+'</label><div class="layui-input-block"><input type="text" style="cursor:no-drop;" readonly="" autocomplete="off" placeholder="此项禁止编辑" class="layui-input"></div></div>';
////					break;
////				
////				case "bigInput":
////					//大编辑框
////					//<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
////					html += '<div class="layui-form-item layui-form-text"><label class="layui-form-label">'+k.tableHead.title+'</label><div class="layui-input-block"><textarea name="'+ k.title +'" autocomplete="off" placeholder="'+k.typeData.msg +'" class="layui-textarea"></textarea></div></div>';
////					break;
//				
//				default:
//					//其他无效果类型
//					//tableCols.push(k.tableHead);
//					break;
//			}		
//			
//			
//			//form.render();
//		});
//		console.log(html)
//		//渲染搜索模板
//		$(searchElem).html(html);
	});

	//var c = enianAdmin.url("https://baidu.com").source;
	//console.log(c)
</script>